﻿{% extends "content_temp.html" %}
{% block content %}

{% block extrajs %}
<script type="text/javascript">

 $(document).ready(function(){
   $("btn_registra").click(function(event){
		$.ajax({
		   contentType: 'application/json',
		   type: "POST",
		   url: "/accounts/register/",
		   dataType: 'json',
		   data: function() {
						var parametros = {};
						var theForm = $.get('form.registraForm');
						var num_of_elements = theForm.length;
						//alert(num_of_elements);
						for (var i=0; i<num_of_elements; i++){
							var theElement = theForm.elements[i];
							var element_type = theElement.type;
							var element_name = theElement.name;
							var element_value = theElement.value;
							parametros[element_name]=element_value;
							//alert(parametros[element_name]);
						}
						
						return parametros;
					},
		   success: function(resp) {
						var item = Ext.decode(resp.responseText);
						
						var i = 0;
						for (key in item){
							//alert(item[key]);
							var	theElement_erroDiv = Ext.get(key+"_erro");
							if (theElement_erroDiv!=null){
								Ext.get(key+"_erro").dom.innerHTML="<ul class='errorlist' style='color:red;'>"+String(item[key])+"</ul>";
							}
							i++;
						}
						
						
						if (i==0){
							var theForm = Ext.get('registraForm').dom;
							var num_of_elements = theForm.length;
							for (var j=0; j<num_of_elements; j++){
								var theElement = theForm.elements[j];
								var	theElement_erroDiv = Ext.get(theElement.name+"_erro");
								if (theElement_erroDiv!=null){
									Ext.get(theElement.name+"_erro").dom.innerHTML="";
									alert(theElement.name);
								}
								
								//theElement.innerText="";
							}
							
							alert('Seu registro foi completado com sucesso.');
							location.href = 'complete/' //redireciona pra pagina completa
						}
						
						
						//Ext.get('contentDiv').dom.innerHTML=String(item.form);
					},
			error: function() {
				// Prompt for user data and process the result using a callback:
				alert('Falha de conexao com o servidor.');
			},
		 });
   });
 });

Ext.onReady(function(){
    var btn = Ext.get("btn_registra");
    btn.on("click", function(){
		btn.dom.disabled = false;
        Ext.Ajax.defaultHeaders = {
            'Accept': 'application/json'
        };
        var resp = Ext.Ajax.request({
            url: '/accounts/register/',
            method: 'POST',
            success: function(resp) {
                var item = Ext.decode(resp.responseText);
				
				var i = 0;
				for (key in item){
					//alert(item[key]);
					var	theElement_erroDiv = Ext.get(key+"_erro");
					if (theElement_erroDiv!=null){
						Ext.get(key+"_erro").dom.innerHTML="<ul class='errorlist' style='color:red;'>"+String(item[key])+"</ul>";
					}
					i++;
				}
				
				
				if (i==0){
					var theForm = Ext.get('registraForm').dom;
					var num_of_elements = theForm.length;
					for (var j=0; j<num_of_elements; j++){
						var theElement = theForm.elements[j];
						var	theElement_erroDiv = Ext.get(theElement.name+"_erro");
						if (theElement_erroDiv!=null){
							Ext.get(theElement.name+"_erro").dom.innerHTML="";
							alert(theElement.name);
						}
						
						//theElement.innerText="";
					}
					
					Ext.Msg.alert('Registro','Seu registro foi completado com sucesso.');
					location.href = 'complete/' //redireciona pra pagina completa
				}
				
				
				//Ext.get('contentDiv').dom.innerHTML=String(item.form);
            },
            failure: function() {
                // Prompt for user data and process the result using a callback:
				Ext.Msg.alert('Erro:', 'Falha de conexao com o servidor.');
            },
			params: function() {
				var parametros = {};
				var theForm = Ext.get('registraForm').dom;
				var num_of_elements = theForm.length;
				//alert(num_of_elements);
				for (var i=0; i<num_of_elements; i++){
					var theElement = theForm.elements[i];
					var element_type = theElement.type;
					var element_name = theElement.name;
					var element_value = theElement.value;
					parametros[element_name]=element_value;
					//alert(parametros[element_name]);
				}
				
				return parametros;
            },
        });
    }, true, {
        single: false
    });
});
</script>
{% endblock %}

<!-- Pagetitle -->
<h1 class="pagetitle">Registro de nova conta:</h1> 
 
    <div class="column1-unit"> 
<div class="contactform"> 
<form action="" method="post" id="registraForm"> 
<fieldset><legend>&nbsp;Preencha seus dados:&nbsp;</legend> 
    
        <div class="fieldWrapper"> 
            
            <div id="first_name_erro"></div> 
            <p><label class="left" for="first_name">Nome</label> 
            <input id="id_first_name" type="text" class="field" name="first_name" maxlength="50" /> 
            </p> 
        </div> 
    
        <div class="fieldWrapper"> 
            
            <div id="last_name_erro"></div> 
            <p><label class="left" for="last_name">Sobrenome</label> 
            <input id="id_last_name" type="text" class="field" name="last_name" maxlength="50" /> 
            </p> 
        </div> 
    
        <div class="fieldWrapper"> 
            
            <div id="cpf_erro"></div> 
            <p><label class="left" for="cpf">CPF (Somente números)</label> 
            <input id="id_cpf" type="text" class="field" name="cpf" maxlength="11" /> 
            </p> 
        </div> 
    
        <div class="fieldWrapper"> 
            
            <div id="gender_erro"></div> 
            <p><label class="left" for="gender">Sexo</label>
<label for="id_gender_0"><input type="radio" id="id_gender_0" value="F" name="gender" /> Feminino</label><br/>
<label for="id_gender_1"><input type="radio" id="id_gender_1" value="M" name="gender" /> Masculino</label>
            </p> 
        </div> 
    
        <div class="fieldWrapper"> 
            
            <div id="birthdate_erro"></div> 
            <p><label class="left" for="birthdate">Data de nascimento</label> 
            <input id="id_birthdate" type="text" class="field" name="birthdate" /> 
            </p> 
        </div> 
    
        <div class="fieldWrapper"> 
            
            <div id="username_erro"></div> 
            <p><label class="left" for="username">Usuário</label> 
            <input id="id_username" type="text" class="field" name="username" maxlength="30" /> 
            </p> 
        </div> 
    
        <div class="fieldWrapper"> 
            
            <div id="email_erro"></div> 
            <p><label class="left" for="email">Endereço de e-mail</label> 
            <input id="id_email" type="text" class="field" name="email" maxlength="75" /> 
            </p> 
        </div> 
    
        <div class="fieldWrapper"> 
            
            <div id="password1_erro"></div> 
            <p><label class="left" for="password1">Senha</label> 
            <input id="id_password1" type="password" class="field" name="password1" /> 
            </p> 
        </div> 
    
        <div class="fieldWrapper"> 
            
            <div id="password2_erro"></div> 
            <p><label class="left" for="password2">Senha (novamente)</label> 
            <input id="id_password2" type="password" class="field" name="password2" /> 
            </p> 
        </div> 
    
    <p><input class="button" id="btn_registra" type="button" value="Cadastrar" /></p> 
</fieldset>    
</form> 
  </div>              
</div>

<h1 class="pagetitle">Registro de nova conta:</h1>

    <div class="column1-unit">
<div class="contactform">
<form action="" method="post" id="registraForm">
<fieldset><legend>&nbsp;Preencha seus dados:&nbsp;</legend>
    {% for field in form %}
        <div class="fieldWrapper">
            {{ field.errors }}
            <div id="{{ field.html_name }}_erro"></div>
            <p><label class="left" for="{{ field.html_name }}">{{ field.label }}</label>
            {{ field }}
            </p>
        </div>
    {% endfor %}
    <p><input class="button" id="btn_registra" type="button" value="Cadastrar" /></p>
</fieldset>    
</form>
  </div>              
</div> 

{% endblock content %}